﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.master" AutoEventWireup="true" 
	CodeBehind="AjaxData.aspx.cs" Inherits="C1BarChart_AjaxData" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" namespace="C1.Web.Wijmo.Controls.C1Chart" tagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
	<wijmo:C1BarChart runat = "server" ID="C1BarChart1" Height="475" Width = "756">
		<Hint>
			<Content Function="hintContent" />
		</Hint>
		<Axis>
			<Y Text="平均分" Min="0" Max="5" AutoMin="false" AutoMax="false" Compass="West"></Y>
			<X Text=""></X>
		</Axis>
		<Header Text=" Netflix评定的十大电影流派"></Header>
	</wijmo:C1BarChart>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" Runat="Server">
	<p>
		此示例演示了如何使用客户端从外部数据源的数据创建一个图表。在这个例子中，我们从Netflix的OData中提取数据。
	</p>
	<ul>
		<li><strong>数据 URL:</strong> <a href="http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc">http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc</a> </li>
		<li><strong>API 文件:</strong> <a href="http://developer.netflix.com/docs/oData_Catalog">http://developer.netflix.com/docs/oData_Catalog</a> </li>
	</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" Runat="Server">
	<script type = "text/javascript">
		function hintContent() {
			return this.data.label + '\n ' + this.y + '';
		}
		$(document).ready(function () {
			var netflx = "http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc";

			$.ajax({
				dataType: "jsonp",
				url: netflx,
				jsonpCallback: "callback",
				success: callback
			});
		});

		function callback(result) {
			// unwrap result
			var names = [];
			var ratings = [];

			var movies = result["d"]["results"];

			for (var i = 0; i < movies.length; i++) {

				names.push(movies[i].Name);
				ratings.push(movies[i].AverageRating);
			}

			$("#<%= C1BarChart1.ClientID %>").c1barchart("option", "seriesList", [
					{
						label: "恐怖等级",
						legendEntry: true,
						data: {
							x: names,
							y: ratings
						}
					}
				]);
		}
	</script>
</asp:Content>

